<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>控制输入框的方法：加v-model。控制：可以获取输入框的内容，也可以修改输入框的内容</p>
        <form>
            <label>用户名：</label>
            <input type="text" v-model="userInfo.name">
            <br>
            <label>密码：</label>
            <input type="password" v-model="userInfo.pwd">
            <br>
            <label>性别：</label>
            <input type="radio" name="sex" value="1" v-model="userInfo.sex">男
            <input type="radio" name="sex" value="2" v-model="userInfo.sex">女<br>
            <label>爱好：</label>
            <span v-for="item in hobbys">
                <input type="checkbox" name="hobby"
                    :value="item"
                    v-model="userInfo.hobby"
                >{{item}}
            </span>
            <br />
            <button @click.prevent="submit">提交</button>
            <button type="reset">重置</button>
        </form>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                userInfo: {
                    name: '',
                    pwd: '',
                    sex: '',
                    hobby: []
                },
                hobbys: [
                    '吃饭','做饭','玩游戏','看电影','数钱'
                ]
            },
            methods: {
                submit() {
                    console.log(this.userInfo);
                }
            }
        })
    </script>
</body>
</html>